<template>
  <SearchForm style="margin-bottom: 20px" />
  <el-card>
    <el-table
      :data="tableData"
      v-loading="loading"
      row-key="userId"
      style="width: 100%; margin-bottom: 20px"
    >
      <el-table-column prop="名称" label="账号" width="240">
         <template #default="{ row }">
           <a :href="'https://pgy.xiaohongshu.com/solar/advertiser/kol/' + row.userId" target="_blank"><el-avatar :size="50" :src="'https://sns-avatar-qc.xhscdn.com/avatar/'+row.userId+'.jpg?imageView2/2/w/80/format/jpg'" style="vertical-align: middle;margin-right:6px"></el-avatar></a>
            
          <el-link
            :href="'https://pgy.xiaohongshu.com/solar/advertiser/kol/' + row.userId"
            target="_blank"
            style="vertical-align: middle;"
            >{{row.名称}}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column prop="小红书号" label="小红书号" />
      <el-table-column prop="小红书号" label="链接">
        <template #default="{ row }">
          <el-link
            :href="'https://www.xiaohongshu.com/user/profile/' + row.userId"
            target="_blank"
            @click.right.prevent="copyLink(row.userId)"
            >访问主页</el-link
          >
        </template>
      </el-table-column>
      <el-table-column prop="粉丝数" label="粉丝数" />
      <el-table-column prop="获赞与收藏" label="赞藏比">
        <template #default="{ row }">
          {{ Math.round((row.获赞与收藏 / row.粉丝数) * 100) / 100 + "%" }}
        </template>
      </el-table-column>
      <el-table-column prop="阅读中位数" label="中位阅读量" />
      <el-table-column prop="price" label="中位互动量">
        <template #default="{ row }">
          {{ row.中位点赞量 + row.中位评论量 + row.中位收藏量 }}
        </template>
      </el-table-column>
      <el-table-column prop="图文笔记一口价" label="图文报价" />
      <el-table-column prop="视频笔记一口价" label="视频报价" />
      <el-table-column prop="女性" label="女粉占比" />
      <el-table-column prop="年龄分布" label="25岁以上占比">
        <template #default="{ row }">
          {{ getAgePercent(row.年龄分布) }}
        </template>
      </el-table-column>
      <el-table-column label="联系人" />
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      v-model:current-page="page.current"
      v-model:page-size="page.size"
      :total="allTableData.length"
    ></el-pagination>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, computed, reactive } from "vue";
import { ElMessage } from "element-plus";
import request from "@/utils/request";
import SearchForm from "./components/SearchForm.vue";
const loading = ref(true);
const page = reactive({
  size: 10,
  current: 1,
});
const allTableData = ref([]);
const tableData = computed(() => {
  const { current, size } = page;
  return allTableData.value.slice((current - 1) * size, current * size);
});
const getUserList = () => {
  loading.value = true;
  request.get("userList.json").then((data: any) => {
    allTableData.value = data;
    loading.value = false;
  });
};
const copyLink = (userId: string) => {
  let oInput = document.createElement("input");
  oInput.value = "https://www.xiaohongshu.com/user/profile/" + userId;
  document.body.appendChild(oInput);
  oInput.select(); // 选择对象
  document.execCommand("Copy"); // 执行浏览器复制命令
  document.body.removeChild(oInput);
  ElMessage({
    message: "复制成功",
    type: "success",
  });
};
const getAgePercent = (ranges: any[]) => {
  const floatNum = (str: string) => parseFloat(str.replace("%", "")) * 100;
  return (
    (floatNum(ranges[2].agePercent) +
      floatNum(ranges[3].agePercent) +
      floatNum(ranges[4].agePercent)) /
      100 +
    "%"
  );
};
getUserList();
</script>
